import React, { Component } from 'react'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchSwitch,
  SearchInfoItem,
  SearchInfoList,
} from './style'

import { connect } from 'react-redux'
import { actionCreators } from './store'
import { CSSTransition } from 'react-transition-group'
import { Link } from 'react-router-dom'

import { actionCreators as loginActionCreators } from '../../pages/login/store'

class Header extends Component {
  constructor(props) {
    super(props)
    this.handleInputFocus = this.handleInputFocus.bind(this)
  }
  getListArea() {
    const { focused, list, page, mouseIn, mouseEnter, mouseLeave, totalPage, changePageList } = this.props
    let pageList = list.toJS().slice((page - 1) * 10, page * 10)
    if (focused || mouseIn) {
      return (
        <SearchInfo onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
          <SearchInfoTitle>
            热门搜索
            <SearchSwitch onClick={() => changePageList(page, totalPage, this.spinIcon)}>
              <i
                ref={(icon) => {
                  this.spinIcon = icon
                }}
                className="iconfont spin"
              >
                &#xe606;
              </i>
              换一批
            </SearchSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {pageList.map((item) => {
              return <SearchInfoItem key={item}>{item}</SearchInfoItem>
            })}
          </SearchInfoList>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
  handleInputFocus() {
    this.props.searchFocus()
    if (!this.props.list.size) {
      this.props.getSearchList()
    }
  }
  render() {
    const { focused, searchBlur, login, setLoginState } = this.props
    return (
      <HeaderWrapper>
        <Logo />
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">
            <i className="iconfont">&#xe60d;</i>下载APP
          </NavItem>
          {login ? (
            <NavItem className="right" onClick={() => setLoginState(false)}>
              退出
            </NavItem>
          ) : (
            <NavItem className="right">
              <Link to="/login">登录</Link>
            </NavItem>
          )}

          <NavItem className="right">
            <i className="iconfont">&#xe636;</i>
          </NavItem>
          <SearchWrapper>
            <CSSTransition in={focused} timeout={2000} classNames="slide">
              <NavSearch className={focused ? 'focused' : ''} onFocus={this.handleInputFocus} onBlur={searchBlur} />
            </CSSTransition>
            <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe610;</i>
            {this.getListArea()}
          </SearchWrapper>
        </Nav>
        <Addition>
          <Link to="/write">
            <Button className="writing">
              <i className="iconfont">&#xe708;</i>写文章
            </Button>
          </Link>

          <Button className="reg">注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    // focused: state.get('header').get('focused')
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    totalPage: state.getIn(['header', 'totalPage']),
    login: state.getIn(['login', 'login']),
  }
}

const { searchFocus, searchBlur, getSearchList, mouseEnter, mouseLeave, changePageList } = actionCreators
const { setLoginState } = loginActionCreators
const mapDispatchToProps = {
  searchFocus,
  searchBlur,
  getSearchList,
  mouseEnter,
  mouseLeave,
  changePageList,
  setLoginState,
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)
